﻿<!DOCTYPE html>
<html lang="en-us">
  <head>
    <meta charset="utf-8">
    <title></title>
      <style>
        body, html {
            background: #f4f0ea;
            margin: 0;
            padding: 0;
            text-align: center;
            font-family: 'Raleway', sans-serif;
            font-size: 14px;
        }

        #target {
            width: 512px;
            height: 512px;
            margin: 0 auto;
            background-image: url("stroke_back.png");
            box-shadow: 0 1px 5px rgba(0,0,0,0.15);
            text-shadow: 0 1px 1px white;
        }
    </style>
    <script>
       var writer;
       var isCharVisible;
       var isOutlineVisible;

       function printStrokePoints(data) {
           var pointStrs = data.drawnPath.points.map(point => `{x: ${point.x}, y: ${point.y}}`);
           console.log(`[${pointStrs.join(', ')}]`);
       }

       function updateCharacter(character) {
           window.location.hash = character;
           writer = HanziWriter.create('target', character, {
               width: 512,
               height: 512,
               radicalColor: '#166E16',
               onCorrectStroke: printStrokePoints,
               onMistake: printStrokePoints,
           });
           isCharVisible = true;
           isOutlineVisible = true;
           window.writer = writer;
           writer.animateCharacter();
       }
       function charVisible() {
           isCharVisible ? writer.hideCharacter() : writer.showCharacter();
           isCharVisible = !isCharVisible;
       }
       function outlineVisible() {
           isOutlineVisible ? writer.hideOutline() : writer.showOutline();
           isOutlineVisible = !isOutlineVisible;
       }
       function quiz() {
           writer.quiz({
               showOutline: true
           });
       }
        window.onload = function() {
           updateCharacter("你");
        }
   </script>

    <script type="application/javascript" src="polyfill.min.js"></script>
    <!-- <script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> -->
    <script type="application/javascript" src="/hanzi-writer.js"></script>
</head>
<body>
    <div id="target">

    </div>
</body>
</html>